<!--
 * @Author: wwssaabb
 * @Date: 2021-09-13 14:01:50
 * @LastEditTime: 2021-09-15 17:05:55
 * @FilePath: \gshop-client\src\components\MyPopup.vue
-->
<template>
  <Popup
    :closeable="showPopup.closeable"
    :round="showPopup.round"
    v-model:show="showInfo.isShow"
    :teleport="showPopup.teleport ? showPopup.teleport : '#app'"
    :position="showPopup.position"
    @close="popupClose"
  >
    <div class="content-wrap">
      <slot></slot>
    </div>
  </Popup>
</template>

<script setup lang="ts">
import { PropType, Ref, ref, watch } from "vue";
import { Popup } from "vant";
//PopupPosition popup显示位置
type PopupPosition = "top" | "left" | "bottom" | "right" | "center" | "";
const showInfo = ref<{ isShow: boolean }>({
  isShow: false,
});

//props
const showPopup = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
  round: {
    type: Boolean,
    default: true,
  },
  closeable: {
    type: Boolean,
    default: true,
  },
  position: {
    type: String as PropType<PopupPosition>,
    default: "center",
  },
  popupClose: Function,
  teleport: String,
});
const popupClose = () => {
  showPopup.popupClose?.();
};
watch(showPopup, () => {
  showInfo.value.isShow = showPopup.isShow;
});
</script>

<style lang="scss" scoped>
.content-wrap {
  position: relative;
  overflow: hidden;
  background-color: transparent;
}
</style>
